<?php
/* @var $this SaleController */
/* @var $model Sale */

$this->breadcrumbs=array(
	'报表分析'=>array('admin'),
	'产品销售分析',
);
//设置页面标题
$this->pageTitle=Yii::app()->name.' - 关键指标分析';
$this->contentTitle='关键指标分析';
?>

<link rel="stylesheet" href="<?php echo Yii::app()->baseUrl?>/js/jqplot/jquery.jqplot.min.css">
<link rel="stylesheet" href="<?php echo Yii::app()->baseUrl?>/js/jqplot/examples/syntaxhighlighter/styles/shCoreDefault.min.css">
<link rel="stylesheet" href="<?php echo Yii::app()->baseUrl?>/js/jqplot/examples/syntaxhighlighter/styles/shThemejqPlot.min.css">
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/examples/syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/examples/syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/examples/syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/plugins/jqplot.logAxisRenderer.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/m_jqplot.js"></script>
    <link type="text/css" href="<?php echo Yii::app()->baseUrl?>/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
    <link type="text/css" href="<?php echo Yii::app()->baseUrl?>/css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jquery-ui-1.8.17.custom.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl?>/js/jquery-ui-timepicker-zh-CN.js"></script>
<!-- 查询表单 -->
<?php $this->renderPartial('_search_sale',array(
	'model'=>$model,
)); ?>
<div>
    <div style="display: none;">
        <?php
            for($i=0;$i<count($data);$i++){
                $num='';
                $list_w=$data[$i];
                for($j=count($list_w)-1;$j>=0;$j--){
                    if($j<count($list_w)-1){
                        $num=$num. ','.$list_w[$j];
                    }  else {
                        $num=$list_w[$j];
                    }
                    
                }
                echo ' <input type="text" id="list_'.$i.'" value="'.$num.'" />';
            }
            echo ' <input type="text" id="arr_count" value="'.count($data).'" />';
        ?>
        <!--日期-->
        <input type="text" id="list_time" value="<?php
                for($i=count($time_arr)-1;$i>=0;$i--){
                    if($i<count($time_arr)-1){
                        echo ','.$time_arr[$i];
                    }  else {
                        echo $time_arr[$i];
                    }
                    
                }
            ?>"/>  
        <!--日期-->
        <input type="text" id="product_list" value="<?php
                for($i=0;$i<count($product_list);$i++){
                    if($i>0){
                        echo ','.$product_list[$i];
                    }  else {
                        echo $product_list[$i];
                    }
                    
                }
            ?>"/>          
    </div>
    <!-- 折线图 -->
    <div id="chart1"></div>
    
     <div class="mylist_foot">
        <!--<div class="fl p10 btn"><a href="javascript:deleteSelect(0);">批 量 删 除</a></div>-->
        <div class="fl p10 btn"><a href="#" onclick="window.open(jqplotToImg($('#chart1')),'mywindow','width=700,height=350');">导出</a></div>
    </div>

</div>
<!-- 数据分页 -->
<!-- 脚本 -->
<script type="text/javascript">
        var arr_count=$("#arr_count").val();//数量
        var str_product=$("#product_list").val();//产品
        var str_time=$("#list_time").val();//时间
        var product_list=str_product.split(',');
        var data=[];
        var line_title=[];
        for (var i=0;i<arr_count;i++){
            var str_w=$("#list_"+i).val();//味达美
            var list_w=str_w.split(',');
            data.push(list_w);
            line_title.push(product_list[i]);            
        }
//        var str_w=$("#list_w").val();//味达美
//        var str_h=$("#list_h").val();//黄飞红
//        var str_l=$("#list_l").val();//六月鲜
//        var str_r=$("#list_r").val();//禾然有机酱油
//        var str_x=$("#list_x").val();//遵循自然
//        var str_time=$("#list_time").val();//遵循自然
//        var data=[];
//        var line_title=[];
//        if(str_w!=""){
//            var list_w=str_w.split(',');
//            data.push(list_w);
//            line_title.push("味达美");
//        }
//        if(str_h!=""){
//            var list_h=str_h.split(',');
//            data.push(list_h);
//            line_title.push("黄飞红");
//        }   
//        if(str_l!=""){
//            var list_l=str_l.split(',');
//            data.push(list_l);
//            line_title.push("六月鲜");
//        }   
//        if(str_r!=""){
//            var list_r=str_r.split(',');
//            data.push(list_r);
//            line_title.push("禾然有机酱油");
//        }   
//        if(str_x!=""){
//            var list_x=str_x.split(',');
//            data.push(list_x);
//            line_title.push("遵循自然");
//        }
        if(str_time!=""){
            var x=str_time.split(',');
        }         
////	var data = [[1,2,3,4,5,6,7,8,9],[3,6,8,1,11,22,4,21,6]];
	var data_max = 100; //Y轴最大刻度
//	var line_title = ["A","B"]; //曲线名称
	var y_label = "数量"; //Y轴标题
	var x_label = "日期"; //X轴标题
//	var x = [1,2,3,4,5,6,7,8,9]; //定义X轴刻度值
	var title = ""; //统计图标标题
	j.jqplot.diagram.base("chart1", data, line_title, title, x, x_label, y_label, data_max, 1);

</script>
    <script>           
        function set_time(id){
            $("#"+id).datetimepicker({
                dateFormat:'yy-mm-dd',
            });             
        }
        //日历控件
        set_time("sale_time");
        set_time("sale_time1");
    function jqplotToImg(obj) {
    var newCanvas = document.createElement("canvas");
    newCanvas.width = obj.find("canvas.jqplot-base-canvas").width()+10;
    newCanvas.height = obj.find("canvas.jqplot-base-canvas").height()+10;
    var baseOffset = obj.find("canvas.jqplot-base-canvas").offset();
     
    // make white background for pasting
    var context = newCanvas.getContext("2d");
    context.fillStyle = "rgba(255,255,255,1)";
    context.fillRect(0, 0, newCanvas.width, newCanvas.height);
     
    obj.children().each(function () {
    // for the div's with the X and Y axis
        if ($(this)[0].tagName.toLowerCase() == 'div') {
            // X axis is built with canvas
            $(this).children("canvas").each(function() {
                var offset = $(this).offset();
                newCanvas.getContext("2d").drawImage(this,
                    offset.left - baseOffset.left+20,
                    offset.top - baseOffset.top
                );
            });
            // Y axis got div inside, so we get the text and draw it on the canvas
            $(this).children("div").each(function() {
                var offset = $(this).offset();
                var context = newCanvas.getContext("2d");
                context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
                context.fillStyle = $(this).css('color');
                context.fillText($(this).text(),
                    offset.left - baseOffset.left+20,
                    offset.top - baseOffset.top + $(this).height()
                );
            });
        } else if($(this)[0].tagName.toLowerCase() == 'canvas') {
            // all other canvas from the chart
            var offset = $(this).offset();
            newCanvas.getContext("2d").drawImage(this,
                offset.left - baseOffset.left+20,
                offset.top - baseOffset.top
            );
        }
    });
     
    // add the point labels
    obj.children(".jqplot-point-label").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.fillStyle = $(this).css('color');
        context.fillText($(this).text(),
            offset.left - baseOffset.left+20,
            offset.top - baseOffset.top + $(this).height()*3/4
        );
    });
     
    // add the title
    obj.children("div.jqplot-title").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.textAlign = $(this).css('text-align');
        context.fillStyle = $(this).css('color');
        context.fillText($(this).text(),
            newCanvas.width / 2,
            offset.top - baseOffset.top + $(this).height()
        );
    });
     
    // add the legend
    obj.children("table.jqplot-table-legend").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.strokeStyle = $(this).css('border-top-color');
        context.strokeRect(
            offset.left - baseOffset.left+20,
            offset.top - baseOffset.top,
            $(this).width(),$(this).height()
        );
        context.fillStyle = $(this).css('background-color');
        context.fillRect(
            offset.left - baseOffset.left+20,
            offset.top - baseOffset.top,
            $(this).width(),$(this).height()
        );
    });
     
    // add the rectangles
    obj.find("div.jqplot-table-legend-swatch").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.fillStyle = $(this).css('background-color');
        context.fillRect(
            offset.left - baseOffset.left+20,
            offset.top - baseOffset.top,
            $(this).parent().width(),$(this).parent().height()
        );
    });
         
    obj.find("td.jqplot-table-legend").each(function() {
        var offset = $(this).offset();
        var context = newCanvas.getContext("2d");
        context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family');
        context.fillStyle = $(this).css('color');
        context.textAlign = $(this).css('text-align');
        context.textBaseline = $(this).css('vertical-align');
        context.fillText($(this).text(),
            offset.left - baseOffset.left+20,
            offset.top - baseOffset.top + $(this).height()/2 + parseInt($(this).css('padding-top').replace('px',''))
        );
    });
 
    // convert the image to base64 format
    return newCanvas.toDataURL("image/png");
}

function SaveAs5(imgURL)
{
var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
for(; oPop.document.readyState != "complete"; )
{ if (oPop.document.readyState == "complete")break; }
oPop.document.execCommand("SaveAs"); oPop.close();
}
</script>
<!-- 脚本 -->
